<template>
  <view-common-header
    @toggle-drawer="$emit('toggle-drawer')"
    back-to="."
  >
    <q-toolbar-title>
      插件设置
    </q-toolbar-title>
    <q-space />
  </view-common-header>
  <q-page-container v-if="plugin">
    <q-page
      bg-sur
      pb-2
    >
      <q-list v-if="pluginsStore.ready">
        <q-item-label header>
          信息
        </q-item-label>
        <q-item>
          <q-item-section>名称</q-item-section>
          <q-item-section side>
            {{ plugin.title }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section min-w="50px">
            描述
          </q-item-section>
          <q-item-section side>
            {{ plugin.description }}
          </q-item-section>
        </q-item>
        <q-item v-if="plugin.author">
          <q-item-section>作者</q-item-section>
          <q-item-section side>
            {{ plugin.author }}
          </q-item-section>
        </q-item>
        <q-item v-if="plugin.homepage">
          <q-item-section>主页</q-item-section>
          <q-item-section side>
            <a
              pri-link
              :href="plugin.homepage"
              target="_blank"
            >
              {{ plugin.homepage }}
            </a>
          </q-item-section>
        </q-item>
        <q-item
          clickable
          @click="pickAvatar"
        >
          <q-item-section>图标</q-item-section>
          <q-item-section
            side
            text-on-sur
          >
            <a-avatar :avatar="data[id].avatar" />
          </q-item-section>
        </q-item>
        <template v-if="plugin.fileparsers.length">
          <q-separator spaced />
          <q-item>
            <q-item-section text-sec>
              文件解析
            </q-item-section>
            <q-item-section side>
              <div>
                启用
              </div>
            </q-item-section>
          </q-item>
          <q-item
            v-for="fp of plugin.fileparsers"
            :key="fp.name"
          >
            <q-item-section avatar>
              <q-item-label>{{ fp.name }}</q-item-label>
              <q-item-label caption>
                {{ fp.description }}
              </q-item-label>
            </q-item-section>
            <q-item-section items-end>
              <list-input
                label="MIME 类型"
                class="xs:w-200px sm:w-250px"
                filled
                dense
                v-model="data[id].fileparsers[fp.name].mimeTypes"
                new-value-mode="add-unique"
              />
            </q-item-section>
            <q-item-section side>
              <q-checkbox v-model="data[id].fileparsers[fp.name].enabled" />
            </q-item-section>
          </q-item>
        </template>
        <q-separator spaced />
        <q-item-label header>
          设置
        </q-item-label>
        <json-input
          :schema="plugin.settings"
          v-model="data[id].settings"
          component="item"
          lazy
        />
      </q-list>
    </q-page>
  </q-page-container>
  <error-not-found v-else />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { usePluginsStore } from 'src/stores/plugins'
import ViewCommonHeader from 'src/components/ViewCommonHeader.vue'
import AAvatar from 'src/components/AAvatar.vue'
import { useQuasar } from 'quasar'
import PickAvatarDialog from 'src/components/PickAvatarDialog.vue'
import ErrorNotFound from 'src/pages/ErrorNotFound.vue'
import ListInput from 'src/components/ListInput.vue'
import JsonInput from 'src/components/JsonInput.vue'
import { useSetTitle } from 'src/composables/set-title'

const props = defineProps<{
  id: string
}>()

defineEmits(['toggle-drawer'])

const pluginsStore = usePluginsStore()
const { data } = pluginsStore

const plugin = computed(() => pluginsStore.plugins.find(p => p.id === props.id))

const $q = useQuasar()
function pickAvatar() {
  $q.dialog({
    component: PickAvatarDialog,
    componentProps: {
      model: data[props.id].avatar,
      defaultTab: 'icon'
    }
  }).onOk(avatar => {
    data[props.id].avatar = avatar
  })
}

useSetTitle(computed(() => plugin.value && `插件设置 - ${plugin.value.title}`))
</script>
